<html>
 <head>
  <link rel="stylesheet" type="text/css" href="..//core/foam.css" />
  <script language="javascript" src="../core/bootFOAM.js"></script>
  <title>FOAM</title>
 </head>
 <body>
  <script language="javascript">
    var timer = Timer.create({});

    var timerView = DetailView.create({ model: timer.model_, showActions: true });
    document.writeln(timerView.toHTML());
    timerView.set(timer);
    timerView.initHTML();

    var space = Canvas.create({width: 1000, height: 700, background:'#fff'});
    space.write(document);

    var mouse = Mouse.create();
    mouse.connect(space.$);

    var COUNT = 100;
    var colours = ['#33f','#f00','#fc0','#33f','#3c0'];
    var s = [];
    for ( var i = 0 ; i < COUNT ; i++ )
    {
       s[i] = Circle.create({
          x: Math.random()*300+300,
          y: Math.random()*300+300,
          r: Math.random()*20+2,
          color: colours[i%colours.length]
       });
       space.addChild(s[i]);
    }

    for ( var i = 1 ; i < COUNT ; i++ )
//       if ( i % 5 == 0 )
       Movement.moveTowards(timer, s[i-1], s[i], 7-6.7*i/COUNT);
//       else
//       Movement.orbit(timer, s[i-1], s[i], 10+Math.random(30), 1000);


//    Movement.orbit(timer, mouse, s[0], 100, 800);
    Movement.moveTowards(timer, mouse, s[0], 3);

    space.paint();
  </script>

 </body>
</html>
